<template>
    <div class="ArticleEdit">
        <el-card>
            <div slot="header" >
                <span class="title">{{editForm.Title}}</span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-delete">删除</el-button>
                <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-edit">编辑</el-button> -->
            </div>
            <div>
                <p v-html="html" v-highlight ></p>
                <span style="float:right;padding:20px 0">上次更新时间：{{editForm.LastUpdateTime}}</span>
            </div>
        </el-card>

         <el-card id="reply">
            <div slot="header" class="replyHeader">{{editForm.Title}}
            </div>
            <div>
                <p v-html="editForm.ArticleContent" v-highlight ></p>
            </div>
        </el-card>
        
        <el-card id="reply">
            <div slot="header" class="replyHeader">添加回复</div>
            <kt-mdedit :content="replyContent"></kt-mdedit>
            <el-button type="primary" class="replyBtn" @click="reply">回复</el-button>
        </el-card>
    </div>
</template>

<script>
import marked from 'marked'

export default {
    data() {
        return {
            editForm:{
                ArticleContent:'',
                Author:'',
                AuthorId:'',
                Createdon:'',
                LastUpdateTime:'',
                Tag:'',
                Title:'',
                Type:'',
            },
            loading:false,
            mainId:'',
            html:'',
            replyContent:'',
        }
    },
    components: {
        marked,
    },
    mounted(){
        if(!kt.isNullOrWhiteSpace(this.$route.params.id)){
            this.mainId=this.$route.params.id;
            this.onUpdate();
        }else{
            this.onCreate();
        }
    },
    components: {
    },
    methods:{
        PageChange:function(){
            this.loadData();
        },
        onUpdate(){
            this.loadData();
        },
        onCreate(){
            
        },
        loadData() {
            try {
                var params={
                    Id:this.mainId
                };
                var requestStr = "/api/Article/GetArticleById";
                this.loading = true;
                kt.post(requestStr,params)
                    .then(res => {
                        this.editForm = res.PostData;
                        this.html=marked(this.editForm.ArticleContent);
                        this.loading = false;
                    })
                    .catch(error => {
                      kt.showErrorToast(error.message);
                      this.loading = false;
                    });
            } catch (error) {
                kt.showErrorToast(error.message);
                this.loading = false;
            }
        },
        reply(){
            if(this.replyContent==null||this.replyContent==""){
                return;
            }
            var params={
                Id:this.mainId,
                replyContent:this.replyContent,
                AuthorId:this.$store.state.user.Id
            };
            var requestStr = "/api/Article/ReplyArticle";
            this.loading = true;
            kt.post(requestStr,params)
                .then(res => {
                    this.editForm = res.PostData;
                    this.html=marked(this.editForm.ArticleContent);
                    this.loading = false;
                })
                .catch(error => {
                  kt.showErrorToast(error.message);
                  this.loading = false;
                });
        },
        formatter(row, column) {
            switch(row.Type){
                case 1:
                return "分享";
                case 2:
                return "讨论";
                case 3:
                return "问答";
                case 4:
                return "吐槽";
                case 5:
                return "建议";
                case 6:
                return "招聘";
                case 7:
                return "其他";
            }
        }
    }
}
</script>

<style>
#reply{
    margin: 20px 0;
}
.replyHeader{
    line-height:40px;
    padding-left: 20px;
}

.ArticleEdit blockquote{
    border-left:4px solid #dddddd;
    padding:0 15px;
    color: #777777;
    margin: 0;
}

.ArticleEdit pre{
    margin:2px 0 8px;
    background-color: #f5f7f8;
    padding: 18px;
}
.ArticleEdit code{
    background-color: #f5f7f8;
}
.title{
    font-size: 20px;
    font-weight: bold;
}

.replyBtn{
    margin-top: 10px;
}
</style>
